<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星级评价</title>
    <style>
        /*.color{
            color:gold;
            
        }*/

        * {
            margin: 0px;
        }

        img {
            width: 50px;
            height: 50px;
        }

        #box2 {
            position: absolute;
            top: 25px;
        }
    </style>
</head>

<body>
    <div id="app">
        <input v-model.number="num">

        <com :num="num" @input="input"></com>
    </div>
</body>
<script src="./vue.js"></script>
<script type="text/html" id="com">
    <div>
        <div>
            <img src="./2.png" alt="" @mousedown="mousedown">
            <img src="./2.png" alt="" @mousedown="mousedown">
            <img src="./2.png" alt="" @mousedown="mousedown">
            <img src="./2.png" alt="" @mousedown="mousedown">
            <img src="./2.png" alt="" @mousedown="mousedown">
        </div>
        <div id="box2">

            <img src="./1.png" alt="" @mousedown="mousedown" v-show="">
            <img src="./1.png" alt="" @mousedown="mousedown" v-show="">
            <img src="./1.png" alt="" @mousedown="mousedown" v-show="">
            <img src="./1.png" alt="" @mousedown="mousedown" v-show="">
            <img src="./1.png" alt="" @mousedown="mousedown" v-show="">
        </div>


    </div>
</script>

<script>
    Vue.component("com", {
        template: "#com",

        data: function () {

            return {
               isShow :false

            }
        },
        props: ["num"],
        computed: {
            pointStyle: function () {
                //  var color = "gold"
                // return {
                //     backgroundColor: color
                // }
            }
        },
        methods: {
            mousedown: function (e) {
                var x = e.pageX - this.$el.offsetLeft;
                var r = Math.ceil(x / 50);
                
                this.$emit("input", r);
                console.log(r)
                

            },


        }
    })

    new Vue({
        el: "#app",
        data: {
            num: ""
        },
        methods: {
            input: function (e) {
                console.log(e)
                this.num = e
            }
        }
    })

</script>

</html>